import { t } from '@/i18n/index';

const COLORS = [
  '#165DFF',
  '#14C9C9',
  '#F7BA1E',
  '#FF7A7A',
  '#3BA272',
  '#91CC75',
  '#73C0DE',
  '#CA90E4',
  '#3F38FC',
  '#F95460',
];

export const chartOptionFn = () => ({
  color: COLORS,
  tooltip: {
    trigger: 'axis',
    formatter: (params) => {
      let res = `<div style="margin-bottom:8px"><p>${params[0].name} ${t(
        'machineProductionStatistics.table.titleSub'
      )}</p></div>`;
      for (var i = 0; i < params.length; i++) {
        if (params[i].data != undefined) {
          res += `<p style="display: flex;justify-content: space-between;align-items: center;line-height: 25px">
            <span style="color:#666;padding-right:1em">${params[i].marker} ${params[i].seriesName}</span>
            <span style="color:#999">${params[i].data}个</span>
          </p>
          `;
        }
      }
      return res;
    },
    textStyle: {
      fontSize: 12,
      lineHeight: 28,
      color: '#222',
    },
    axisPointer: {
      lineStyle: {
        color: '#D9D9D9',
        type: 'solid',
      },
    },
  },
  legend: {
    left: 'right',
    type: 'scroll',
    top: 0,
    data: [],
  },
  grid: {
    left: '4%',
    right: '3%',
    top: '90',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#E6E6E6',
      },
    },
    axisTick: {
      alignWithLabel: true,
      lineStyle: {
        color: '#E6E6E6',
      },
    },
    axisLabel: {
      color: '#666666',
      lineStyle: {},
    },
    data: [],
  },
  yAxis: {
    type: 'value',
    min: 0,
    name: t('machineProductionStatistics.table.yAxis'),
    nameGap: 42,
    nameTextStyle: {
      align: 'right',
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#E6E6E6',
      },
    },
    axisTick: {
      alignWithLabel: true,
      lineStyle: {
        color: '#E6E6E6',
      },
    },
    axisLabel: {
      color: '#666666',
      lineStyle: {},
    },
  },
  series: [],
});
